@charset "utf-8";

#container{
	width: 10.0rem
}

#container li{
	width: 10.0rem;
	height: 1.6rem;
	border-bottom: 1px solid #ccc;
	position: relative;
}

.study strong{
	position: absolute;
	top: 0.4667rem;
	left: 0.5333rem;
	width: 0.6667rem;
	height: 0.6667rem;
	display: block;
	background-image:url(../images/number.gif) ;
	background-repeat: no-repeat;
	background-size:  contain;
	color: #fff;
	text-align: center;
	line-height: 0.6667rem;
	font-size: 40px
}

.study .n{
	position: absolute;
	top: 0.4667rem;
	left: 0.5333rem;
	width: 0.6667rem;
	height: 0.6667rem;
	display: block;
	background: #fff;
	color: #000;
	text-align: center;
	line-height: 0.6667rem;
	font-size: 40px
}

ul img{
	position: absolute;
	border-radius: 50% 50%;
	top: 0.32rem;
	left: 2.24rem;
	border:1px solid #ccc;
}

ul span{
	position: absolute;
	left: 3.4rem;
	top: 0.64rem;
	font-size: 34px;
}

ul p{
	position: absolute;
	top: 0.64rem;
	left: 6.36rem;
	font-size: 28px;
	color: #666666
}

/*goodcourse*/

.el{
	width:10.0rem;
	border-top: 0.2667rem solid #f0f0f0;
}

.el-1{
	width: 10.0rem;
	height:2.2533rem;
	display: block;
	position: relative;
	border-top: 1px solid #e1e1e1
}

.el-1 img{
	width: 2.6667rem;
	height: 1.6533rem;
	position: absolute;
	top: 0.3333rem;
	right: 0.4rem
}

.msg{
	width: 6.16rem;
	height: 1.6rem;
	position: absolute;
	top: 0.36rem;
	left: 0.4rem
}

.heading{
	font-size: 14px;
	font-weight: bold;
	color: #000
}

[data-dpr="2"] .heading{
	font-size: 30px
}

[data-dpr="3"] .heading{
	font-size: 52px
}

.amount{
	width: 6.16rem;
	height: 0.4rem;
	position: absolute;
	bottom: 0
}

.amount p{
	display: block;
	font-size: 12px;
	color: #808080
}

p:nth-child(1){
	left: 0;
	position: absolute;
}

p:nth-child(2){
	left: 1.5rem;
	position: absolute;
}

p:nth-child(3){
	left: 3.5rem;
	position: absolute;
}

[data-dpr="2"] .amount p{
	font-size: 24px
}

[data-dpr="3"] .amount p{
	font-size: 40px
}

.fever{
	background-image:url(../images/index/hot.gif);
	background-repeat: no-repeat;
	background-size: 0.5333rem 0.3467rem;
	background-position: 5.6267rem 0
}

/*devote  study*/

.devote strong{
	position: absolute;
	top: 0.4667rem;
	left: 0.5333rem;
	width: 0.6667rem;
	height: 0.6667rem;
	display: block;
	background-image:url(../images/orange.gif) ;
	background-repeat: no-repeat;
	background-size:  contain;
	color: #fff;
	text-align: center;
	line-height: 0.6667rem;
	font-size: 20px
}

[data-dpr="2"] .devote strong{
	font-size: 40px
}

[data-dpr="3"] .devote strong{
	font-size: 56px
}

.devote .n{
	position: absolute;
	top: 0.4667rem;
	left: 0.5333rem;
	width: 0.6667rem;
	height: 0.6667rem;
	display: block;
	background: #fff;
	color: #000;
	text-align: center;
	line-height: 0.6667rem;
	font-size: 22px
}

.devote img{
	width: 1.0667rem;
	height: 1.0667rem
}

.devote span{
	font-size: 14px
}

[data-dpr="2"] .devote span{
	font-size: 32px
}

[data-dpr="3"] .devote span{
	font-size: 52px
}

.devote p{
	font-size: 14px
}

[data-dpr="2"] .devote p{
	font-size: 28px
}

[data-dpr="3"] .devote p{
	font-size: 48px
}

/*teacher*/

.thr{
	width: 10.0rem
}

.thr a{
	display: block;
	width: 10.0rem;
	height: 1.6rem;
	border-bottom: 1px solid #ccc;
	position: relative;
}

.thr img{
	position: absolute;
	border-radius: 50% 50%;
	border:1px solid #ccc;
	top: 0.2667rem;
	left: 0.5333rem;
	width: 1.0667rem;
	height: 1.0667rem
}

.thr span{
	position: absolute;
	top: 0.3667rem;
	left: 2.0rem;
	color: #000
}

[data-dpr="3"] .thr span{
	font-size: 54px
}

.thr p{
	position: absolute;
	top: 0.8667rem;
	left: 2.0rem;
	color: #ccc
}

[data-dpr="3"] .thr p{
	font-size: 42px
}

cite{
	font-size: 14px;
	border: 1px solid #ccc
}

[data-dpr="2"] cite{
	font-size: 28px
}

[data-dpr="3"] cite{
	font-size: 50px
}

/*result*/


#content{
	width: 10.0rem;
	height: 16.08rem;
	background: #f0f0f0;
	overflow: hidden;
}

.result{
	width: 9.2rem;
	height: 0.8667rem;
	margin: 0.3733rem auto;
	position: relative;
}

.result img{
	width: 0.8133rem;
	height: 0.8133rem
}

.result span{
	position: absolute;
	left: 1.2rem;
	top: 0.1667rem;
	color: #1a69d3;
	font-size: 22px
}

[data-dpr="2"] .result span{
	font-size: 34px
}

[data-dpr="3"] .result span{
	font-size: 64px
}

.result-detail{
	width: 10.0rem;
	height: 2.9067rem;
	background: #fff;
	overflow: hidden;
}

.md{
	width: 7.2rem;
	height: 1.44rem;
	position: relative;
	margin: 0.8rem auto;
}

.yes{
	position: absolute;
	top: 0;
	left: 1.5333rem;
	font-size: 18px;
	font-weight: bold;
}

[data-dpr="2"] .yes{
	font-size: 32px
}

[data-dpr="3"] .yes{
	font-size: 56px
}

.no{
	position: absolute;
	top: 0;
	right: 1.5333rem;
	font-size: 18px;
	font-weight: bold;
}

[data-dpr="2"] .no{
	font-size: 32px
}

[data-dpr="3"] .no{
	font-size: 56px
}

.ts{
	position: absolute;
	text-align: center;
	width: 7.2rem;
	bottom: 0;
	font-size: 12px;
	color: #666666
}

[data-dpr="2"] .ts{
	font-size: 24px
}

[data-dpr="3"] .ts{
	font-size: 46px
}

.nextclass{
	width: 7.2rem;
	height: 2.56rem;
	margin: 0 auto ;
	overflow: hidden;
	border-bottom: 1px solid #ccc
}

.nextbutton{
	width: 3.0rem;
	height: 1.0667rem;
	background: #1e6bdf;
	color: #fff;
	display: block;
	border-radius: 0.1333rem;
	margin: 0.72rem auto;
	line-height: 1.0667rem;
	text-align: center;
	font-size: 16px
}

[data-dpr="2"] .nextbutton{
	font-size: 32px
}

[data-dpr="3"] .nextbutton{
	font-size: 52px
}

.bj{
	display: block;
	padding: 0.8267rem 3.3333rem;
	font-size: 14px;
}

[data-dpr="2"] .bj{
	font-size: 26px
}

[data-dpr="3"] .bj{
	font-size: 50px
}

.bar{
	width: 9.2rem;
	height: 0.8rem;
	margin: 0 auto 0.6rem;
	font-size: 14px;
	position: relative;
}

[data-dpr="2"] .bar{
	font-size: 30px
}

[data-dpr="3"] .bar{
	font-size: 48px
}

.progress{
	position: absolute;
	left: 0;
	top: 0;
	width: 9.2rem;
	height: 0.08rem;
	background: #cbcbcb
}

.blue-1{
	position: absolute;
	left: 0;
	top: 0;
	width: 8.004rem;
	height: 0.08rem;
	background: #1e6bdf
}

.blue-2{
	position: absolute;
	left: 0;
	top: 0;
	width: 8.28rem;
	height: 0.08rem;
	background: #1e6bdf
}

.num{
	position: absolute;
	left: 0;
	bottom: 0
}

.rate{
	position: absolute;
	right: 0;
	bottom: 0
}